<template>
    <div class="mapChart" ref="mapChart"></div>

    <div demo-bg class="table">
        <dv-scroll-board :config="config" @mouseover="mouseoverHandler" @click="clickHandler" />
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { getMap } from '../../../api';
import './middle.css';

const mapChart = ref(null);
const config = reactive({
    header: ['姓名', '就职企业', '岗位', '薪资'],
    data: [
        ['李菲', '八维', '前端工程师', '101k'],
        ['刘梦飞', '阿里巴巴', '前端工程师', '19k'],
        ['宋丹丹', '腾讯', '前端工程师', '18k'],
        ['卢俊杰', '字节跳动', '前端工程师', '21k'],
        ['常任耀', '京东', '前端工程师', '22k'],
        ['张鹏飞', '拼多多', '前端工程师', '18k'],
        ['郭世杰', '小鹏', '前端工程师', '22k'],
        ['张振宇', '快手', '前端工程师', '18k'],
        ['王建华', '虎牙', '前端工程师', '18k'],
        ['卢俊杰', '字节跳动', '前端工程师', '21k'],
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
})

const map = (name, adcode) => {
    getMap(adcode).then(res => {
        const myChart = echarts.init(mapChart.value);
        echarts.registerMap(name, res.data);

        const option = {
            title: {
                text: name,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)',
            },
            visualMap: {
                min: 8,
                max: 50,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered'],
                },
            },
            geo: {
                map: name,
                label: {
                    emphasis: {
                        show: false,
                    },
                },
            },
            series: [
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: [
                        [116.405285, 39.904989],
                    ],
                },
                {
                    name: name,
                    type: 'map',
                    map: name,
                    label: {
                        show: false,
                    },
                    data: res.data.features.map(item => ({
                        name: item.properties.name,
                        value: item.properties.childrenNum,
                        adcode: item.properties.adcode,
                    })),
                },
            ],
        };

        myChart.setOption(option);
    }).catch(error => {
        console.error(error);
    });
};

const mouseoverHandler = (e) => {
    console.log(e);
}

const clickHandler = (e) => {
    console.log(e);
}

onMounted(() => {
    map('中华人民共和国', 100000);
});
</script>

<style scoped></style>
